<template>
  <el-dialog
    v-model="visible"
    title="聊天"
    width="800px"
    :close-on-click-modal="false"
    :show-close="true"
    @close="handleClose"
    class="chat-panel-dialog"
  >
    <div class="chat-panel-main flex">
      <ChatSidebar class="w-1/3 border-r" @select="handleSelectSession" />
      <ChatWindow class="flex-1" />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import ChatSidebar from './ChatSidebar.vue'
import ChatWindow from './ChatWindow.vue'

const visible = ref(false)

// 提供全局方法打开聊天面板
if (typeof window !== 'undefined') {
  window.$openChatPanel = () => { visible.value = true }
  window.$closeChatPanel = () => { visible.value = false }
}

function handleClose() {
  // 可做清理
}

function handleSelectSession(sessionId) {
  // 由 ChatSidebar 触发，ChatWindow 会自动响应
}
</script>

<style scoped>
.chat-panel-main {
  height: 600px;
}
</style> 